<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="app-container">
        <!--编写ElementUI组件-->
      订单号:
      {{purchaseNumber}}
      <br/>
      <a-row>
        <br/>
        <a-col :span="5">
          供应商：
          <a-select  style="width: 250px" v-model="id">
            <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">
              {{item.supplierName}}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          应付金额：
          <template>
            <a-input placeholder="0" style="width: 150px"/>
          </template>
        </a-col>
        <a-col :span="4">
          实付金额：
          <template>
            <a-input placeholder="0" style="width: 150px"/>
          </template>
        </a-col>
        <a-col :span="4">
          收货日期：
          <a-date-picker/>
        </a-col>
        <a-col :span="7">
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="13">
          备注：
          <a-input placeholder="0" style="width: 900px"/>
        </a-col>
        <a-col :span="5">
          是否付款：
          <a-select default-value="lucy" style="width: 150px">
            <a-select-option value="jack">
              已付款
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="3">
          <a-button type="primary" icon="check" style="width: 100px ">
          保存
          </a-button>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col>
          <a-button type="primary" icon="plus-circle" style="width: 100px " @click="showModal">
            添加
          </a-button>
          <a-button type="primary" icon="form" style="width: 100px ">
            修改
          </a-button>
          <a-button type="primary" icon="delete" style="width: 100px ">
            删除
          </a-button>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col>
          <div style="margin-bottom: 16px">
            <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
          </div>
          <a-table
            :columns="columns2"
            :data-source="data2"
          />
        </a-col>
      </a-row>

      <div>
        <a-modal v-model="visible" title="Basic Modal" @ok="handleOk" width="1500px">
          <a-row>
            <a-col :span="4">
              <a-tree
                v-model="expandedKeys"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                :replace-fields="{children:'children',key:'goodsTypeId',title:'goodsTypeName'}"
                @expand="onExpand"
                @select="onSelect"
              />
            </a-col>
            <a-col :span="18">
              <a-table
                :columns="columns"
                :data-source="data"
              >
                <template slot="operation" slot-scope="text, record">

                    <a href="javascript:;" @click="showModal2(record.goodsCode)">添加</a>

                </template>
              </a-table>
            </a-col>
          </a-row>
        </a-modal>
      </div>
      <div>
        <a-modal v-model="visible2" title="Basic Modal" @ok="handleOk2" width="800px">
          <template>
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="商品编号：">
                    <a-input v-model="form.goodsCode" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="商品名称：">
                    <a-input v-model="form.goodsName" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="商品型号：">
                    <a-input v-model="form.goodsModel" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="商品单位：">
                    <a-input v-model="form.goodsUnit" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="上次进价：">
                    <a-input v-model="form.lasjxcPurchasingPrice" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="商品库存：">
                    <a-input v-model="form.inventoryQuantity" disabled style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="单价：">
                    <a-input v-model="form.price" style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="数量：">
                    <a-input v-model="form.insertNum" style="width: 150px"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </template>
        </a-modal>
      </div>
    </div>

</template>

<script>
    // 编写vue.js代码
    import ACol from "ant-design-vue/es/grid/Col";
    import ARow from "ant-design-vue/es/grid/Row";
    import { httpAction, getAction } from '@/api/manage'
    const columns = [
      {
        title: '商品编号',
        dataIndex: 'goodsCode',
      },
      {
        title: '商品名称',
        dataIndex: 'goodsName',
      },
      {
        title: '商品型号',
        dataIndex: 'goodsModel',
      },
      {
        title: '商品单位',
        dataIndex: 'goodsUnit',
      },
      {
        title: '上次进价',
        dataIndex: 'lasjxcPurchasingPrice',
      },
      {
        title: '成本均价',
        dataIndex: 'avgPrice',
      },
      {
        title: '库存数量',
        dataIndex: 'inventoryQuantity',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' },
      },
    ];
    const columns2 = [
      {
        title: '商品编号',
        dataIndex: 'goodsCode',
      },
      {
        title: '商品名称',
        dataIndex: 'goodsName',
      },
      {
        title: '商品型号',
        dataIndex: 'goodsModel',
      },
      {
        title: '商品单位',
        dataIndex: 'goodsUnit',
      },
      {
        title: '单价',
        dataIndex: 'price',
      },
      {
        title: '数量',
        dataIndex: 'goodsNum',
      },
      {
        title: '总金额',
        dataIndex: 'total',
      },
    ];

    const data = [];
    const data2 = [];
    const treeData = [
      {
        goodsTypeId: undefined,
        goodsTypeName:undefined,
        children: [],
      },
    ];

    export default {


      components: {ARow, ACol},
      data() {
            return {
                // 组件中使用的各种属性
              id:undefined,
              typeList:[],
              purchaseNumber:undefined,
              labelCol: { span: 4 },
              wrapperCol: { span: 14 },
              form: {
                goodsCode: undefined,
                goodsName: undefined,
                goodsModel: undefined,
                goodsUnit: undefined,
                lasjxcPurchasingPrice: undefined,
                inventoryQuantity: undefined,
                price: undefined,
                insertNum:undefined,
              },
              pageSize:10,
              pageNo:1,
              visible: false,
              visible2: false,
              data,
              data2,
              columns,
              columns2,
              selectedRowKeys: [], // Check here to configure the default column
              loading: false,
              expandedKeys: [],
              autoExpandParent: true,
              checkedKeys: [],
              selectedKeys: [],
              treeData,
            }
        },
        // 编写各种事件方法
      computed: {
        hasSelected() {
          return this.selectedRowKeys.length > 0;
        },
      },
      watch: {
        checkedKeys(val) {
          console.log('onCheck', val);
        },
      },
        methods: {
          showModal() {
            this.visible = true;
          },
          showModal2(id) {
            this.visible2 = true;
            getAction("purchase/goodsCode/"+id).then((resp)=>{if(resp.success){
              this.form = resp.result;
            }
            })
          },
          handleOk(e) {
            console.log(e);
            this.visible = false;

          },
          handleOk2(e) {
            this.data2.push(this.form);
            this.visible2 = false;
          },

          onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
          },
          onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys);
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
          },
          onCheck(checkedKeys) {
            console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
          },
          onSelect(selectedKeys, info) {
            /*console.log('onSelect', info);*/
            this.selectedKeys = selectedKeys;
            console.log(this.selectedKeys[0]);
            getAction("purchase/goods/"+this.pageNo+"/"+this.pageSize+"/"+this.selectedKeys[0]).then((resp)=>{if(resp.success){
              this.data = resp.result.records;
            }
            })

          },
          getSupplier(){
            getAction("purchase/list").then((resp)=>{if(resp.success){
              this.typeList = resp.result
            }
            })
          },
          getGoodsType(){
            getAction("purchase/type").then((resp)=>{if(resp.success){
              this.treeData = resp.result
            }
            })
          },
        },
        // 编写页面加载时执行的代码
        mounted() {

        this.getGoodsType();
        this.getSupplier();
        }
    }
</script>

<style scoped>
    .app-container {
        position: relative;
        width: 100%;
        height: calc(100vh - 84px);
    }
</style>
